<template>
    <div class="index-lists">
        <el-card class="!border-none" shadow="never">
            <el-form ref="formRef" class="mb-[-16px]" :model="queryParams" :inline="true">
              <el-form-item label="赛事名称" prop="name">
                <el-input class="w-[280px]" v-model="queryParams.name" placeholder="请输入赛事名称"/>
              </el-form-item>
              <el-form-item label="赛事地点" prop="address">
                <el-input class="w-[280px]" v-model="queryParams.address" placeholder="请输入赛事地点"/>
              </el-form-item>
              <el-form-item label="比赛方式" prop="playType">
                <el-select v-model="queryParams.playType" class="w-[280px]" placeholder="请选择比赛方式" clearable>
                  <el-option label="男单打" :value="1" />
                  <el-option label="女单打" :value="2" />
                  <el-option label="男双打" :value="3" />
                  <el-option label="女双打" :value="4" />
                  <el-option label="男女混打" :value="5" />
                </el-select>
              </el-form-item>
              <el-form-item label="赛事赛程" prop="schedule">
                <el-select v-model="queryParams.schedule" class="w-[280px]" placeholder="请选择赛事赛程" clearable>
                  <el-option label="初赛" :value="1" />
                  <el-option label="半决赛" :value="2" />
                  <el-option label="总决赛" :value="3" />
                </el-select>
              </el-form-item>
              <el-form-item label=" 队伍&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp;&nbsp; " prop="teamName">
                <el-input class="w-[280px]" v-model="queryParams.teamName" placeholder="请输入队伍"/>
              </el-form-item>
                <el-form-item label="组织方&nbsp;&nbsp;&nbsp;" prop="orgParty">
                    <el-input class="w-[280px]" v-model="queryParams.orgParty" placeholder="请输入组织方"/>
                </el-form-item>
                <el-form-item>
                    <el-button type="primary" @click="resetPage">查询</el-button>
                    <el-button @click="resetParams">重置</el-button>
                </el-form-item>
            </el-form>
        </el-card>
        <el-card class="!border-none mt-4" shadow="never">
            <el-table class="mt-4" size="large" v-loading="pager.loading" :data="pager.lists">
                <el-table-column label="名称" prop="name" min-width="100" />
              <el-table-column label="地址场次" prop="name" min-width="150">
                <template #default="{ row }">
                  {{row.address}}-{{row.addressName}}
                  <el-tag v-if="row.schedule == 1">初赛</el-tag>
                  <el-tag type="danger" v-else-if="row.schedule == 2">半决赛</el-tag>
                  <el-tag type="danger" v-else-if="row.schedule == 3">总决赛</el-tag>
                  第{{row.orderNum}}场
                </template>
              </el-table-column>
              <el-table-column label="时间" prop="startTime" min-width="150">
              </el-table-column>
              <el-table-column label="队伍" prop="playTeamName" min-width="130">
              </el-table-column>
                <el-table-column label="比赛方式" min-width="80">
                    <template #default="{ row }">
                        <el-tag v-if="row.playType==1">男单打</el-tag>
                        <el-tag type="warning" v-if="row.playType==2">女单打</el-tag>
                        <el-tag type="success" v-if="row.playType==3">男双打</el-tag>
                        <el-tag type="info" v-if="row.playType==4">女双打</el-tag>
                        <el-tag type="danger" v-if="row.playType==5">男女混打</el-tag>
                    </template>
                </el-table-column>

                <el-table-column label="状态" prop="status" min-width="80">
                  <template #default="{ row }">
                    <el-tag v-if="row.status == 0">比赛中</el-tag>
                    <el-tag type="success" v-else-if="row.status == 1">晋级</el-tag>
                    <el-tag type="success" v-else-if="row.teamStatus == 1">胜利晋级</el-tag>
                    <el-tag type="info" v-else-if="row.status == 3">结束</el-tag>
                  </template>
                </el-table-column>
                <el-table-column label="组织方" prop="orgParty" min-width="100" />
<!--              <el-table-column label="操作" width="120" fixed="right">-->
<!--                <template #default="{ row }">-->
<!--                  <el-button v-perms="['user.user/detail']" type="primary" link>-->
<!--                    <router-link-->
<!--                        :to="{-->
<!--                                      path: getRoutePath('user.user/detail'),-->
<!--                                      query: {-->
<!--                                          id: row.id-->
<!--                                      }-->
<!--                                  }"-->
<!--                    >-->
<!--                      调整-->
<!--                    </router-link>-->
<!--                  </el-button>-->
<!--                </template>-->
<!--              </el-table-column>-->
            </el-table>
            <div class="flex justify-end mt-4">
                <pagination v-model="pager" @change="getLists" />
            </div>
        </el-card>
    </div>
</template>
<script lang="ts" setup name="competition">
import { competitionScoreLists} from '@/api/competition/competition'
import { usePaging } from '@/hooks/usePaging'
import {getRoutePath} from "@/router";
const queryParams = reactive({
    name: '',
    address: '',
    playTime: '',
    playType: '',
    schedule: '',
    status: '',
    orgParty: '',
  teamName: '',
})

const { pager, getLists, resetPage, resetParams } = usePaging({
    fetchFun: competitionScoreLists,
    params: queryParams
})
getLists()
</script>
